
<script>
export default {
  props:{
    columns: {
      type: Array,
      default(){
        return [];
      }
    },
    data: {
      type: Array,
      default(){
        return [];
      }
    }
  },
  data(){
    return{
      currentColumns: [],
      currentData: []
    }
  },
  render(h){
    //console.log('h',h);
    var _this = this;
    var ths = [];    
    this.currentColumns.forEach((col, index)=>{
      if (col.sortable){
        ths.push(
          h('th',[
            h('span', col.title),
            //升序
            h('a',{
              class: {
                on: col._sortType === 'asc'
              },
              on: {
                click(){
                  _this.handleSortByAsc(index);
                }
              }
            },'↑'),
            //降序
            h('a',{
               class: {
                on: col._sortType === 'desc'
              },
              on: {
                click(){
                  _this.handleSortByDesc(index);
                }
              }
            }, '↓')
          ])

        )
      } else {
        ths.push(h('th', col.title));
      }
    })
    var trs = [];
    this.currentData.forEach((row)=>{
      var tds = [];
      _this.currentColumns.forEach((cell)=>{
        tds.push(h('td',row[cell.key]));
      })
      trs.push(h('tr',tds));
    })
    return h('table',[
      h('thead',[
        h('tr',ths)
      ]),
      h('tbody',trs)
    ])
  },
  mounted(){
    this.makeColumns();
    this.makeData();
  },
  methods:{
    handleSortByAsc(index){
      var key = this.currentColumns[index].key;
      this.currentColumns.forEach((col)=>{
        col._sortType = 'normal';
      })
      this.currentColumns[index]._sortType = 'asc';
      this.currentData.sort((a,b)=>{
        return a[key] > b[key] ? 1 : -1;
      })
    },
    handleSortByDesc(index){
      var key = this.currentColumns[index].key;
      this.currentColumns.forEach((col)=>{
        col._sortType = 'normal';
      })
      this.currentColumns[index]._sortType = 'desc';
      this.currentData.sort((a,b)=>{
        return a[key] < b[key] ? 1 : -1;
      })
    },
    makeColumns(){
      this.currentColumns = this.columns.map((col,index)=>{
        console.log('col',col);
        //添加一个字段标识当前列排序的状态，后续使用
        col._sortType = 'normal';
        //添加一个字段标识当前列在数组中的索引
        col._index = index;
        return col;
      })
    },
    makeData(){
      this.currentData = this.data.map((row,index)=>{
        //添加一个字段标识当前列在数组中的索引
        row._index = index;
        return row;
      })
    }
  },
  watch: {
    data(){
      this.makeData();
      var sortedColumn = this.currentColumns.filter((col)=>{
        return col._sortType !== 'normal';
      })
      if (sortedColumn.length > 0){
        if(sortedColumn[0]._sortType === 'asc'){
          this.handleSortByAsc(sortedColumn[0]._index);
        } else {
           this.handleSortByDesc(sortedColumn[0]._index);
        }
      }
    }
  }
}
</script>
<style scoped>
table{
  width: 100%;
  margin-bottom: 24px;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #e9e9e9;
}
table th{
  background-color: #f7f7f7;
  color:#5c6b77;
  font-weight: 600;
  white-space: nowrap;
}
table td, table th{
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
}
table th a{
  font-weight: bold;
  display: inline-block;
  margin: 0 4px;
  cursor: pointer;
}
table th a.on{
  color: #3399ff;
}
table th a:hover{
  color: #3399ff;
}
</style>


